<template>
  <cs-card>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      class="contentTable_G"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="id" label="小区ID" width="260"> </el-table-column>
      <el-table-column prop="name" label="小区名称" width="160">
      </el-table-column>
      <el-table-column prop="address" label="小区地址" width="360">
      </el-table-column>
      <el-table-column label="附近地标" width="200" prop="landmark">
      </el-table-column>
      <el-table-column prop="cityCode" label="城市编码" width="180">
      </el-table-column>
      <el-table-column prop="latitude" label="小区纬度" width="160">
      </el-table-column>
      <el-table-column prop="longitude" label="小区经度" width="160">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        :filters="statusFilters"
        :filter-method="statusFilterTag"
      >
        <template v-slot="scoped">
          <span>{{ scoped.row.status === true ? "审核完成" : "待审核" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template>
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="auditLinkClick"
            >审核</el-link
          >
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="deleteLinkClick"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination_section_G">
      <span class="currentSelect_G">{{ `共${totalCount}项` }}</span>
      <div class="pagination_right_G">
        <span>{{ `${pageSize}条/页` }}</span>
        <cs-pagination
          :currentPage="currentPage"
          :totalPage="totalPage"
          @firstPageClick="firstPageClick"
          @previousPageClick="previousPageClick"
          @nextPageClick="nextPageClick"
          @lastPageClick="lastPageClick"
          @junkToOtherPage="junkToOtherPage"
        />
      </div>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsPagination from "@/components/CsPagination/CsPagination.vue";

export default {
  name: "adTable",
  components: {
    CsCard,
    CsPagination,
  },
  data() {
    return {
      tableData: [
        {
          id: "2021040710790011",
          name: "临夏州",
          address: "积石山保安族东乡族撒拉族自治县",
          landmark: "北部湾广场",
          cityCode: "450503",
          latitude: "101.00",
          longitude: "101.33",
          status: false,
        },
        {
          id: "2021040710790011",
          name: "大榕树",
          address: "广西壮族自治区北海市银海区",
          landmark: "万达广场",
          cityCode: "450503",
          latitude: "50.33",
          longitude: "101.00",
          status: false,
        },
        {
          id: "2021040710790011",
          name: "园辉新都",
          address: "天津省天津市南开区",
          landmark: "吾悦广场",
          cityCode: "450503",
          latitude: "101.00",
          longitude: "101.33",
          status: false,
        },
        {
          id: "2021040710790011",
          name: "大湾小区",
          address: "积石山保安族东乡族撒拉族自治县",
          landmark: "万达广场",
          cityCode: "450503",
          latitude: "101.00",
          longitude: "101.33",
          status: false,
        },
      ],
      statusFilters: [
        { text: "true", value: "true" },
        { text: "false", value: "false" },
      ],
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
    };
  },
  methods: {
    statusFilterTag(value, row, column) {
      console.log({ value, row, column });
      return row.tag === value;
    },
    // 审核小区链接点击事件
    auditLinkClick() {
      this.$emit("examineDialogLinkClick");
    },
    // 删除审核小区链接点击事件
    deleteLinkClick() {
      this.$emit("deleteDialogLinkClick");
    },
    // 第一页按钮点击
    firstPageClick() {
      this.$emit("firstPageClick");
    },
    // 上一页按钮点击
    previousPageClick() {
      this.$emit("previousPageClick");
    },
    // 下一页按钮点击
    nextPageClick() {
      this.$emit("nextPageClick");
    },
    // 最后一页按钮点击
    lastPageClick() {
      this.$emit("lastPageClick");
    },
    // 手动输入跳转其他页
    junkToOtherPage(pageNum) {
      this.$emit("junkToOtherPage", pageNum);
    },
  },
};
</script>

<style lang="sass" scoped></style>
